<template>
  <div>
    <!-- 第二步：自动发现设备中 -->
    <div class="step2">
      <div class="head">自动发现</div>
      <div class="body">
        <img class="lf" src="@/assets/images/fxz.png" alt="" srcset="" />
        <div class="rt">
          <div class="head">发现进度</div>
          <div class="title">搜索IP</div>
          <el-progress
            :percentage="percentage"
            :stroke-width="12"
            :show-text="false"
            color="#1269FF"
          ></el-progress>
        </div>
      </div>
      <div class="foot">
        <button @click="skip" :disabled="percentage != 100">
          查看发现结果
        </button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { getPing, getSnmp } from "@/api/find";

@Component
export default class Progress extends Vue {
  public percentage: Number = 0; //进度
  public findResultData: Array<any> = []; //测试可达性的结果
  public SnmpResultData: Array<any> = [];
  public pingResultData: Array<any> = [];
  $router: any;
  $route: any;

  public created() {
    let type = eval(this.$route.params.type);
    console.log("type", type);
    let snmpData =
      JSON.parse(sessionStorage.getItem("selectedSnmpData")) == null
        ? []
        : JSON.parse(sessionStorage.getItem("selectedSnmpData"));
    let pingData =
      JSON.parse(sessionStorage.getItem("selectedPingData")) == null
        ? []
        : JSON.parse(sessionStorage.getItem("selectedPingData"));

    let total = 0; //接口请求总数
    let finished = 0;
    for (let i = 0; i < type.length; i++) {
      if (type[i] == "Snmp") {
        total += snmpData.length;
      } else if (type[i] == "Ping") {
        total += pingData.length;
      }
    }

    for (let i = 0; i < type.length; i++) {
      if (type[i] == "Snmp") {
        // Snmp可达性
        for (let i = 0; i < snmpData.length; i++) {
          console.log("Snmp提交");
          let name = snmpData[i].name;
          let startIP = snmpData[i].startIP;
          let endIP = snmpData[i].endIP;
          //截取结束IP最后一个/之后的值
          let endIPindex = endIP.lastIndexOf(".");
          let __endIP = endIP.substring(endIPindex + 1, endIP.length);
          getSnmp({
            communitylist: name,
            seg: startIP + "-" + __endIP,
          }).then((res) => {
            finished++;
            this.percentage = (finished / total) * 100;

            if (res.data.length <= 0) {
              console.log("未发现Snmp可达设备");

              // this.$message({
              //   showClose: true,
              //   message: "未发现Snmp可达设备!",
              //   type: "error",
              // });
            } else {
              console.log(22);
              console.log("Snmp---", res.data);
              for (const key in res.data) {
                if (Object.prototype.hasOwnProperty.call(res.data, key)) {
                  this.SnmpResultData.push(res.data[key]);
                }
              }
            }
          });
        }
      } else if (type[i] == "Ping") {
        // Ping可达性
        for (let i = 0; i < pingData.length; i++) {
          console.log("Ping提交");
          let startIP = pingData[i].startIP;
          let endIP = pingData[i].endIP;
          //截取结束IP最后一个/之后的值
          let endIPindex = endIP.lastIndexOf(".");
          let __endIP = endIP.substring(endIPindex + 1, endIP.length);

          getPing({ seg: startIP + "-" + __endIP }).then((res) => {
            finished++;
            this.percentage = (finished / total) * 100;
            console.log("finished-Ping", finished, total, this.percentage);
            if (res.data.length <= 0) {
              console.log("未发现Ping可达设备");
              // this.$message({
              //   showClose: true,
              //   message: "未发现Ping可达设备!",
              //   type: "error",
              // });
            } else {
              console.log("Ping---", res.data);
              for (const key in res.data) {
                if (Object.prototype.hasOwnProperty.call(res.data, key)) {
                  this.pingResultData.push(res.data[key]);
                }
              }
            }
          });
        }
      }
    }
  }

  public async skip() {
    console.log("SnmpResultData", this.SnmpResultData);
    console.log("pingResultData", this.pingResultData);

    for (let i = 0; i < this.SnmpResultData.length; i++) {
      this.findResultData.push(this.SnmpResultData[i]);
    }

    console.log("1", this.findResultData);

    for (let i = 0; i < this.pingResultData.length; i++) {
      this.findResultData.push(this.pingResultData[i]);
    }
    console.log("2", this.findResultData);

    sessionStorage.setItem(
      "findResultData",
      JSON.stringify(this.findResultData)
    );
    this.$router.push("/find/result");
  }
}
</script>

<style lang="stylus" scoped>
.step2 /deep/.el-progress-bar__outer, .step2 /deep/.el-progress-bar__inner {
  border-radius: 0;
}

.step2 {
  width: 994px;
  margin: 110px auto;
  background: #fff;
  padding: 60px 140px;
  -moz-box-shadow: 3px 3px 3px #E1E1E1;
  -webkit-box-shadow: 3px 3px 3px #E1E1E1;
  box-shadow: 3px 3px 3px #E1E1E1;

  .head {
    font-weight: 700;
    line-height: 50px;
    color: #000000;
    width: 200px;
    text-align: center;
  }

  .body {
    display: flex;
    margin-top: 30px;

    .lf {
      width: 200px;
      height: 200px;
      margin-right: 65px;
    }

    .rt {
      width: 300px;
      font-size: 13px;

      .head {
        text-align: left;
      }

      .title {
        color: #777777;
      }

      .el-progress {
        margin-top: 16px;
        margin-bottom: 20px;
      }
    }
  }

  .foot {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    border-top: dotted 1px #A4A4A4;

    button {
      margin-top: 60px;
      border-radius: 5px;
      border: none;
      font-size: 13px;
      color: #fff;
      background: #1269FF;
      width: 117px;
      height: 30px;
      line-height: 30px;
      cursor: pointer;
    }

    button:disabled {
      background: #c0c4cc;
    }
  }
}
</style>